<template>
  <div class="print-pos">
    <div style="width: 100%;height: 80px;display: flex;align-items: center;justify-content: center">
      <button v-print="printObj" class="print-btn">打印</button>
      <button  class="print-btn" style="margin-left: 20px;" @click="close">取消</button>
      <div id="loading" v-show="printLoading"></div>
    </div>
    <div class="printMe_box">
      <div id="printMe" style="background:#fff;width: 1123px;overflow-x: auto">
       <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PrintCom",
  data() {
    return {
      printLoading: true,
      printObj: {
        id: "printMe",
        popTitle: '',

        extraHead: '',
        beforeOpenCallback(vue) {
          vue.printLoading = true
          console.log('打开之前')
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback(vue) {
          console.log('关闭了打印工具')
        }
      },
    }
  },
  methods:{
    close(){
      this.$emit("close")
    }
  }
}
</script>

<style scoped lang="scss">

.print-btn {
  cursor: pointer;
  background: #fff;
  border: none;
  width: 80px;
  height: 30px;
  border: 2px;
  color: #333;
  letter-spacing: 3px
}

.print-pos {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: #efefef;
}

.printMe_box {
  width: 100vw;
  background: #efefef;
  display: flex;
  justify-content: center
}


</style>
